<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .help-hr {
        height: 0.24rem;
      }

      /* 右边箭头的样式 */
      .van-collapse-item__title .van-cell__right-icon::before {
        transform: rotate(0deg);
      }
      .van-collapse-item__title--expanded .van-cell__right-icon::before {
        transform: rotate(90deg);
        font-size: 0.28rem;
        font-weight: 1000;
      }

      /* 脚部联系客服样式 */
      .header-go-service {
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">帮助</div>
            <div class="header-right"></div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div class="help-hr"></div>
        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-for="(item,index) of commentData"
            :key="index"
            :title="item.title"
            :name="index+1"
            ><div v-html="item.desc"></div
          ></van-collapse-item>
        </van-collapse>
      </div>
      <!-- <div class="page-bottom">
        <div class="help-hr"></div>
        <div class="header-go-service" @click="goService">
          <span>icon</span>联系客服
        </div>
      </div> -->
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      //  注册 Collapse 组件
      Vue.use(vant.Collapse).use(vant.CollapseItem)

      new Vue({
        el: '#app',
        components: {},
        data: {
          activeNames: [''],
          // 评论的数据
          commentData: [],
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          //  返回按钮
          goBack() {
            window.history.back(-1)
          },
          //  跳转到客服
          goService() {
            location.href = './customerService.html'
          }
        },
        created() {
          userService.getHelpInfo().then(res => {
            this.commentData = res
            this.isShowZLLoading = false
          })
        }
      })
    </script>
  </body>
</html>
